<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
    数组有7个可以改变自身的方法：
      1. push
      2. pop
      3. shift
      4. unshift
      5. sort
      6. reverse
      7. splice

    Vue2 中使用的 Object.defineProperty 无法检测到数组这7个方法的调用，从而无法实现响应式。Vue2 内部对这7个方法做了改写



    Object.defineProperty 的局限性：
        1. 无法监控对象属性的新增与删除
          可以使用 $set 实例方法 来做新增
            this.$set(要修改的对象, 属性, 属性值)
          可以使用 $delete 实例方法 来做喊出
            this.$delete(要操作的对象, 属性)
        2. 无法监控根据数组下标来修改数组元素
          可以使用 $set
        3. 无法监控直接修改数组长度的操作
          可以使用 splice
        4. 数组7个原生方法也无法被检测,所以Vue2中做了重写
   -->

    <div id="app">
      <button @click="addProp">addProp</button>

      <button @click="delProp">delProp</button>

      <button @click="indexChange">indexChange</button>
      <button @click="changeLength">changeLength</button>
      <hr />
      <ul>
        <li v-for="(item, key) in person" :key="key">{{item}}</li>
      </ul>

      <hr />
      <ul>
        <li v-for="(item, index) in list" :key="index">{{ item }}</li>
      </ul>
    </div>

    <script src="../lib/vue2.js"></script>
    <script>
      new Vue({
        data() {
          return {
            person: {
              name: "张三",
              age: 18,
            },
            list: ["Apple", "Banana"],
          };
        },
        methods: {
          addProp() {
            // console.log("this", this);
            // this.person.sex = "男";
            // console.log("person", this.person);

            this.$set(this.person, "sex", "男");
          },

          delProp() {
            // delete this.person.age;
            // console.log("person", this.person);

            this.$delete(this.person, "age");
          },

          indexChange() {
            // this.list[0] = "Orange";
            // console.log("list", this.list);

            this.$set(this.list, 0, "Orange");
          },

          changeLength() {
            // this.list.length = 1;

            this.list.splice(1);
          },
        },
      }).$mount("#app");
    </script>
  </body>
</html>
